---
import { Image } from "astro:assets";
import config from "@/config/config.json";
import {marked} from "marked";

const { post, index } = Astro.props;
const { blog_folder, summary_length } = config.settings;
---

<div class="post">
  {
    post.image && (
      <Image
        class="rounded-lg"
        src={post.image}
        alt={post.title}
        width={index === 0 ? 925 : 445}
        height={index === 0 ? 475 : 230}
      />
    )
  }
  <h2 class="h3 mb-2 mt-4 line-clamp-2">
    <a href={`/${blog_folder}/${post.id}`} class="block hover:text-primary">
      {post.title}
    </a>
  </h2>
  <p class="line-clamp-4" set:html={marked.parseInline(post.content.slice(0, summary_length))} />
  <a class="btn btn-primary mt-4" href={`/${blog_folder}/${post.id}`} rel="">
    Read More
  </a>
</div>
